<template>
	<view class="collect-container">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px'}">
				<view class="navigater flex align-center justify-between">
					<scroll-view :scroll-left="scrollLeft" scroll-x class="nav text-center">
						<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub"
							:class="currentItemId === item.type ? 'text-green cur' : ''"
							@tap="handleSelect(item.type, index)">
							<text class="text-30">{{item.type_text}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true }" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="collect-container__main">
				<view class="content padding-top-sm">
					<block v-for="(item, index) in dataList">
						<wanl-colllect-homeking @delCollect="delCollect" :data="item" v-if="currentItemId == 1"></wanl-colllect-homeking>
						<wanl-colllect-circle @delCollect="delCollect" :data="item" v-else-if="currentItemId == 6"></wanl-colllect-circle>
						<wanl-colllect-hospital @delCollect="delCollect" :data="item" v-else-if="currentItemId == 12"></wanl-colllect-hospital>
						<wanl-colllect-doctor @delCollect="delCollect" :data="item" v-else-if="currentItemId == 11"></wanl-colllect-doctor>
						<wanl-colllect-medicalvisit @delCollect="delCollect" :data="item" v-else-if="currentItemId == 2"></wanl-colllect-medicalvisit>
						<wanl-colllect-accompany @delCollect="delCollect" :data="item" v-else-if="currentItemId == 3"></wanl-colllect-accompany>
						<view class="item bg-white" :key="index" @click="handleGoods(item)" v-else>
							<image class="cu-avatar margin-right-bj" :src="$wanlshop.oss(item.goodsinfo.image)" mode="aspectFill"></image>
							<view class="subject">
								<view class="text-cut-2 text-df wanl-gray-dark">
									<text style="margin-right: 4rpx;margin-bottom: 6rpx;" class="cu-tag radius sm bg-green">{{navList[currentId].type_text}}</text>
									{{item.goodsinfo.title}}
								</view>
								<view class="flex justify-between align-center margin-top-sm" >
									<view v-if="item.type == 6 || item.type == 9" class="text-df wanl-gray-dark">作者：{{item.goodsinfo.author}}</view>
									<view v-else-if="item.type == 12 && item.goodsinfo.tags" class="text-df wanl-gray-dark tags">
										<block v-for="(d,j) in item.goodsinfo.tags.split(',')" :key="j">
											<text v-if="j < 3">{{d}}</text>
										</block>
									</view>
									<!-- <view v-else style="color: #E31F1F;" class="text-price text-bold"> {{item.goodsinfo.price}}</view> -->
									<view class="button text-bold text-sm wanl-gray-light">
										<text class="icon-shanchu1 iconfont" @click.stop="loadFollow(item.id, index)"></text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	import wanlColllectCircle from '@/components/wanl-colllect/wanl-colllect-circle.vue'
	import wanlColllectHospital from '@/components/wanl-colllect/wanl-colllect-hospital'
	import wanlColllectDoctor from '@/components/wanl-colllect/wanl-colllect-doctor'
	import wanlColllectMedicalvisit from '@/components/wanl-colllect/wanl-colllect-medicalvisit'
	import wanlColllectAccompany from '@/components/wanl-colllect/wanl-colllect-accompany'
	import wanlColllectHomeking from '@/components/wanl-colllect/wanl-colllect-homeking'
	export default {
		components:{
			wanlColllectCircle,wanlColllectHospital,wanlColllectDoctor,wanlColllectMedicalvisit,wanlColllectAccompany,wanlColllectHomeking
		},
		data() {
			return {
				dataList:[],
				headHeight: 0,
				currentId: 0,
				currentItemId: '1',
				navList: [
					{index:0,type: '1',type_text: '家政服务'},
					{index:1,type: '2',type_text: '医护上门'},
					{index:2,type: '3',type_text: '陪诊陪护'},
					{index:3,type: '6',type_text: '圈子'},
					{index:4,type: '7',type_text: '商品'},
					// {index:5,type: '8',type_text: '团购'},
					{index:6,type: '9',type_text: '文章'},
					{index:7,type: '11',type_text: '医生'},
					{index:8,type: '12',type_text: '医院'}
				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '收藏正在加载...',
					contentnomore: ''
				},
				scrollLeft: 0
			};
		},
		async onLoad() {
			// 计算页面尺寸
			this.headHeight = uni.upx2px(90);
		},
		methods: {
			load(paging,key) {
				let index = this.currentId;
				let navItem = this.navList[index];
				let url = ''
				switch (Number(navItem.type)){
					case 1:
						url = '/addons/homeking/api.collect/lists'
						break;
					case 2:
						url = '/addons/medicalvisit/api.collect/lists'
						break;
					case 3:
						url = '/addons/accompany/api.collect/lists'
						break;
					case 11:
						url = '/addons/internethospital/api.collect/lists'
						break;
					case 12:
						url = '/addons/internethospital/api.collect/lists'
						break;
					case 6:
						url = '/addons/circle/api.collect/collect'
						break;
					default:
						url = '/wanlshop/product/collect'
						break;
				}
				uni.request({
					url: url,
					data: {
						type: navItem.type == 11 ? 2 : 1,
						page: paging.page
					},
					success: res => {
						let dataList = res.data.data
						console.log(res)
						if(key == 'load') {
							this.dataList = [...this.dataList, ...dataList];
							this.$refs.list.loadSuccess({ list: this.dataList, total: res.data.total });
						} else if(key == 'refresh') {
							this.dataList = dataList;
							this.$refs.list.refreshSuccess({ list: dataList, total: res.data.total });
						}
					}
				});
			},
			delCollect() {
				
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			},
			async loadFollow(id, index) {
				await uni.request({
					url: '/member/collect/del',
					method: 'POST',
					data: {
						ids: id
					},
					success: res => {
						// 从列表删除
						this.$wanlshop.msg('取消收藏')
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
					}
				});
				// if(this.navList[this.currentId].dataList[index].type == 6){
				// 	await uni.request({
				// 		url: '/member/collect/add',
				// 		method: 'post',
				// 		data: {
				// 			type: "6",
				// 			source_id: this.navList[this.currentId].dataList[index].source_id,
								
				// 		},
				// 		success: res => {
				// 			uni.showToast({
				// 				title: '删除成功',
				// 				icon:'none',
				// 				duration: 2000
				// 			});
				// 		}
				// 	});
				// }
				
			},
			// 选择Tag
			handleSelect(id, index) {
				this.currentItemId = id;
				this.currentId = index;
				this.scrollLeft = index * uni.upx2px(160)
				
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			},
			handleGoods(item){
				switch (Number(this.currentItemId)){
					case 1:
						this.$wanlshop.to(`/pages/medicalcare/homemaking/product?id=${item.goods_id}`)
						break;
					case 2:
						this.$wanlshop.to(`/pages/medicalcare/visit/product?id=${item.source_id}`)
						break;
					case 3:
						this.$wanlshop.to(`/pages/medicalcare/accompany/product?id=${item.source_id}`)
						break;
					case 6:
						this.$wanlshop.to(`/pages/circle/details?id=${item.circle_id}`)
						break;
					case 7:
						this.$wanlshop.to(`/pages/product/goods?id=${item.source_id}`)
						break;
					case 8:
						this.$wanlshop.to(`/pages/apps/groups/goods?id=${item.source_id}`)
						break;
					case 9:
						this.$wanlshop.to(`/pages/article/details?id=${item.source_id}&title=${item.title}&type=article`)
						break;
					case 11:
						this.$wanlshop.to(`/pages/medicalcare/bookingsystem/doctor?id=${item.doctor_id}`)
						break;
					case 12:
						this.$wanlshop.to(`/pages/medicalcare/bookingsystem/hospital?id=${item.hospital_id}`)
						break;
					default:
						break;
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EDEDED;
	}
	.collect-container {
		&__head {
			.navigater {
				position: relative;

				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9999;

					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}

		&__main {
			position: relative;
			z-index: 99;
			padding-top: 20rpx;
			.content {
				height: 100%;

				.item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-radius: 10rpx;
					margin: 0 30rpx 20rpx 30rpx;
					padding: 20rpx;
					// height: 200rpx;
					.cu-avatar {
						height: 160rpx;
						width: 160rpx;
						flex-shrink: 0;
						border-radius: 10rpx;
					}
					.subject {
						display: flex;
						width: calc(100% - 185rpx);
						height: 100%;
						// flex-wrap: wrap;
						// align-content: space-between;
						flex-direction: column;
						justify-content: space-between;
						&>view {
							width: 100%;
						}

						.menu {
							display: flex;
							justify-content: space-between;
							.button {
								&>text + text{
									margin-left: 40rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	.margin-lr {
		margin: 0 30rpx !important;
	}
	.nav .cu-item {
		width: 160rpx !important;
	}
	.nav .cu-item.cur {
		border: none;
		position: relative;
		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 34rpx;
			height: 4rpx;
			background: #4CBD66;
			bottom: 0;
			left: 50%;
			margin-left: -17rpx;
		}
	}
	.tags {
		text {
			display: inline-block;
			padding: 2rpx 10rpx;
			border-radius: 6rpx;
			font-size: 22rpx;
			color: #fff;
	
			&:nth-child(1) {
				background-color: #4CBD66;
				margin-right: 16rpx;
			}
	
			&:nth-child(2) {
				background-color: #1FA7DC;
				margin-right: 16rpx;
			}
			
			&:nth-child(3) {
				background-color: #FF2F2F;
			}
		}
	}
</style>